<span id="showLeftBar">
    <a href="javascript:dhis2.leftBar.showAnimated()" title="$i18n.getString('show_menu' )"><i class="fa fa-arrow-right leftBarIcon"></i></a>
</span>

<div id="leftBar">
    
    <d2-left-bar></d2-left-bar>
    
    <div id="orgUnitTree">
        <ul>
        </ul>
    </div>
    
    <img id="ouwt_loader" src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}"/>
    
    <div class="small-horizontal-spacing" ng-if="!treeLoaded">
        {{'loading_tree'| translate}}
    </div>
    
    <!--- selected org unit begins -->
    <input type="text" selected-org-unit ng-model="selectedOrgUnit.displayName" ng-hide=true>
    <!--- selected org unit ends  -->
    
</div>

<div id="mainPage" class="bordered-div page">
    <h2>{{'program_summary_report'| translate}}</h2>
    <form name="outerForm" novalidate>               
        <div ng-include="'components/report/report-form.html'"></div>
    </form>    
    <img src="../images/ajax-loader-bar.gif" ng-if="!dataReady && reportStarted"/>
    <div ng-if="dataReady">
        <div ng-switch="ngSwitchParameter()">
            <div ng-switch-when="undefined">
                <div class="alert alert-warning vertical-spacing">
                    {{'no_data_found'| translate}}
                </div>
            </div>
            <div ng-switch-when="0">
                <div class="alert alert-warning vertical-spacing">
                    {{'no_data_found'| translate}}
                </div>
            </div>
            <div ng-switch-when="-1">
                <div class="alert alert-warning vertical-spacing">
                    {{'too_many_items_report'| translate}}
                </div>
            </div>
            <div ng-switch-default>

                <!-- report begins -->
                <div class="vertical-spacing">
                    <tabset>                        
                        <tab ng-repeat="stage in programStages | orderBy: 'sortOrder'">
                            <tab-heading>
                                <span class="bold">{{stage.displayName}}</span>
                            </tab-heading>
                            <div ng-if="stage.hasData">
                                <table class="table table-bordered vertical-spacing">
                                    <thead>                        
                                        <tr>
                                            <th class="active">
                                                {{selectedProgram.trackedEntityType.displayName}}
                                            </th>
                                            <th class="active">
                                                {{'event_date' | translate}}
                                            </th>
                                            <th class="active">
                                                {{'event_orgunit_name'| translate}}
                                            </th>
                                            <th class="active" ng-if="prStDe.displayInReports" ng-repeat="prStDe in stage.programStageDataElements">
                                                {{prStDe.dataElement.displayName}}
                                            </th>                                        
                                        </tr>                        
                                    </thead>
                                    <tbody ng-repeat="tei in teiList">
                                        <tr ng-repeat="ev in dhis2Events | filter: {programStage: stage.id, trackedEntityInstance: tei} | orderBy: 'eventDate'">
                                            <td rowspan="{{(dhis2Events | filter: {programStage: stage.id, trackedEntityInstance: tei}).length}}" 
                                                ng-if="$index === 0">
                                                <span ng-repeat="gridColumn in gridColumns" ng-if="gridColumn.displayInListNoProgram">
                                                    <span class="bold">{{gridColumn.displayName}}:</span> {{ev[gridColumn.id]}}<br>
                                                </span>
                                            </td>
                                            <td>
                                                {{ev.eventDate}}
                                            </td>
                                            <td>
                                                {{ev.orgUnitName}}
                                            </td>
                                            <td ng-if="prStDe.displayInReports" ng-repeat="prStDe in stage.programStageDataElements">
                                                {{ev[prStDe.dataElement.id]}}
                                            </td>                                                                       
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div ng-if="!stage.hasData">
                                <div class="small-vertical-spacing alert alert-default">{{'no_data_found'| translate}}</div>
                            </div>
                            
                        </tab>
                    </tabset>
                </div>
                <!-- report ends -->
                
            </div>
        </div> 
    </div>
</div>